<template>
  <div id="login">
    <div class="container">
      <div class="img"><img src="./../../assets/img/logo.png" alt=""></div>
      <mt-field label="账号" placeholder="账号" :state="userAccount!=''? 'success':'warning'" v-model="userAccount"></mt-field>
      <mt-field label="密码" placeholder="密码" type="password" :state="userPass!=''? 'success':'warning'" v-model="userPass"></mt-field>
      <div class="loginBtn">
        <mt-button type="primary" size="large" @click.native="loginFn">登录</mt-button>
      </div>
      <div class="xy">
        <span class="bg">
            <i class="iconfont icon-iconfontxuanzhong1"  v-show="checked"  @click="checked=!checked"></i>  <i  @click="checked=!checked"   v-show="!checked"    class="iconfont icon-weixuanzhong-01"></i> <span  @click="$router.push('/clubhelp')" style="text-decoration: underline;">代理手册</span>
        </span>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    MessageBox,
    Checklist
  } from 'mint-ui';
  export default {
    name: "login",
    data() {
      return {
        userAccount: "",
        userPass: "",
        checked: true,
      };
    },
    methods: {
      //获取用户的信息
      getInfo: function() {
        let getInfoData = {
          params: {
            'functionname': "getagentinfo"
          }
        }
        //  console.log(getInfoData)
        this.$http.get(`${this.baseUrl}/Main/GetData`, getInfoData).then(response => {
          let data = response.data;
          if (data.code == 1) {
            this.$store.state.user = data.body;
            sessionStorage.setItem("info", JSON.stringify(this.$store.state.user))
          } else {
            MessageBox('提示', data.msg);
            //  console.log("获取用户资料出错了")
          }
        }).catch(error => {
          MessageBox('出错了', "出错了");
          // console.log(error);
        })
      },
      loginFn: function() {
        let that = this;
        if (!this.checked) {
          MessageBox('提示', "请先勾选俱乐部手册");
          return false;
        }
        if (this.userAccount == "") {
          MessageBox('提示', "账号不能为空");
          return false;
        }
        if (this.userPass == "") {
          MessageBox('提示', "密码不能为空");
          return false;
        }
        let loginData = {
          userName: this.userAccount,
          userPwd: this.userPass
        }
        // console.log(loginData);
        this.$http.post(`${this.baseUrl}/user/userlogin`, loginData).then(response => {
          let data = null;
          data = response.data;
          // console.log(data)
          let code = 0;
          code = data.code;
          if (code == 1) {
            //写入浏览器session 存储
            sessionStorage.setItem('Ticket', data.body.access_token);
            // console.log(data.body)
            that.getInfo(); //获取用户的信息
            that.$store.state.isSimple = data.body.issimple;
            this.setCookie(this.userAccount, this.userPass, 1000);
            if (data.body.issimple) {
              MessageBox.confirm("你的密码过于简单，是否要进行修改?", "提示").then((action) => {
                this.$router.push('/editpass');
                return false;
              }, () => {
                this.$router.push('/home');
                return false;
              })
            } else {
              this.$router.push('/home');
            }
          } else if (code == 5001) {
            // console.log("出错了")
            //网络错误
            // alert(data.msg)
            MessageBox("提示", "用户名或者密码出错")
          } else if (code == 5002) {
            MessageBox("提示", "用户已注销")
          } else {
            MessageBox("提示", "网络异常")
          }
        }).catch(error => {
          //  MessageBox("提示", "登陆出错了")
        })
      },
      goold() {
        window.location.href = "http://dhm.jsz111.com/home/login";
      },
      //设置cookie
      setCookie(c_name, c_pwd, exdays) {
        var exdate = new Date(); //获取时间
        exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
        //字符串拼接cookie
        window.document.cookie = "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
        window.document.cookie = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
      },
      //读取cookie
      getCookie: function() {
        if (document.cookie.length > 0) {
          // console.log(document.cookie)
          var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
          for (var i = 0; i < arr.length; i++) {
            var arr2 = arr[i].split('='); //再次切割
            //判断查找相对应的值
            if (arr2[0] == 'userName') {
              this.userAccount = arr2[1]; //保存到保存数据的地方
            } else if (arr2[0] == 'userPwd') {
              this.userPass = arr2[1];
            }
          }
        }
      },
      //清除cookie
      clearCookie: function() {
        this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
      }
    },
    created() {},
    mounted() {
      this.getCookie()
    }
  };
</script>

<style lang="scss" scoped>
  .xy {
    font-size: 1.45rem;
    margin-top: 20px;
    text-align: center;
    .bg {
      color: #2e6ea0;
      font-weight: 600;
    }
  }
  #login {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    top: 0;
    width: 100%;
    min-width: 320px;
    max-width: 640px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    align-content: center;
    background: #ece6d6;
    z-index: 1100;
    .container {
      margin: 0 auto;
      padding: 30px 10px 30px 10px;
      .loginBtn {
        margin-top: 30px;
      }
    }
  }
  .img {
    width: 50%;
    margin: 0 auto 25px auto;
    img {
      display: block;
      width: 100%;
    }
  }
  .mint-button--default {
    background: green;
    float: right;
    color: #fff;
    a {
      display: block;
      width: 100%;
    }
  }
</style>
